<template>
    <div class="full">
        <i @click="onToggle" class="iconfont icon-quanping ico"></i>
    </div>
  </template>
 
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted } from "vue";
  import screenfull from "screenfull";
 
  // 是否全屏
  const isFullscreen = ref(false);
 
  // 监听变化
  const change = () => {
    isFullscreen.value = screenfull.isFullscreen;
  };
 
  // 切换事件
  const onToggle = () => {
    screenfull.toggle();
  };
 
  // 设置侦听器
  onMounted(() => {
    screenfull.on("change", change);
  });
 
  // 删除侦听器
  onUnmounted(() => {
    screenfull.off("change", change);
  });
  </script>
  
 
  <style lang="scss" scoped>
  .full{
    margin-right: 10px;
    .ico{
        color: rgb(251, 144, 22);
        font-size: 20px;
        font-weight: 700;
    }
  }

</style>
 